{extend name="public/baseLayuimini"}
{block name="title"}{/block}
{block name="css"}
<link rel="stylesheet" href="/static/layui/css/layui.css">
<style>
    #demo2 {justify-content: space-between;flex-direction: row;flex-wrap: wrap;}
    #demo2 .layui-upload-img {width: 100%;height: 110px;}
    #demo2 li {position: relative;width: 18%;display: inline-flex;justify-content: center;align-items: center;margin: 8px 1%;border: 3px solid #3694fa;box-sizing: border-box;}
    #demo2 li .success {display: block;position: absolute;left: 0;bottom: 0;height: 40px;width: 100%;z-index: 200;background: url(/static/ueditor/dialogs/image/images/success.png) no-repeat right bottom;}
    .album {}
    .album .layui-side {top:51px;width: 95px}
    .album .layui-side .item {width: 100%;height: 30px;line-height: 30px;text-align: center;border-bottom: 1px solid #ddd;cursor: pointer;}
    .layui-side-scroll {width:95px;border-right: 1px solid #ddd;-ms-overflow-style: none;overflow: -moz-scrollbars-none; }
    .layui-side-scroll::-webkit-scrollbar { width: 0 !important }
    .album .layui-side .item.on {background: #ff5500;color: #fff;}
    .album .layui-body {left: 95px;}
    .imageList {flex-direction: row;flex-wrap: wrap;display: flex;}
    .imageList .item {width: 98px;height: 98px;box-sizing:border-box;position: relative;margin:0 10px 5px 0;}
    .imageList .item:hover {border: 2px solid #1094fa;}
    .imageList .item img {width: 100%;height: 100%;}
    .imageList .item .icon {cursor: pointer;width: 98px;height: 98px;position: absolute;top: 0;left: 0;z-index: 2;border: 0;background-repeat: no-repeat;}
    .imageList .item.active .icon {background-image: url(/static/ueditor/dialogs/image/images/success.png);background-position: 57px 57px;}
    .review img {object-fit: cover;width: 100%;}
    .albumlist {}
    .albumlist .item {display: inline-block;vertical-align: middle;width: 127px;height: 105px;line-height: 25px;padding: 20px 0;margin-right: -1px;margin-bottom: -1px;border: 1px solid #e2e2e2;font-size: 14px;text-align: center;color: #666;transition: all .3s;-webkit-transition: all .3s;}
    .guanlilist {-ms-overflow-style: none;overflow: -moz-scrollbars-none;max-height: 340px;overflow-y: scroll;}
    .guanlilist::-webkit-scrollbar { width: 0 !important }
    .guanlilist .item {display: inline-block;width: 120px;height: 45px;line-height: 45px;position: relative;border: 1px solid #ddd;border-radius: 4px;overflow: hidden;margin-right: 4px;}
    .guanlilist .item p {text-align: center;margin-left: -20px;}
    .guanlilist .item span {position: absolute;right: 5px;top: 14px;border: 1px solid #ddd;height: 16px;width: 16px;line-height: 15px;text-align: center;border-radius: 50%;cursor: pointer;}
    .guanli .add {width: 125px;height: 45px;line-height: 45px;text-align: center;border:1px solid #ddd;border-radius: 10px;background: #1E9FFF;color: #fff;position: fixed;right: 20px;bottom: 20px;cursor: pointer;}

</style>
{/block}
{block name="main"}
<div class="layui-tab layui-tab-brief" lay-filter="tab">
    <ul class="layui-tab-title">
        <li class="layui-this">上传文件</li>
        <li>本地文件夹</li>
        <li>添加文件夹</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-upload layui-form" lay-filter="album">
                <div class="layui-form-item">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                        <div class="layui-inline filegroup" style="float:right;">
                            <label class="layui-form-label">选择文件夹</label>
                            <div class="layui-input-inline">
                                <select name="album" lay-filter="相册"></select>
                            </div>
                        </div>
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                <tr><th>文件名</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr></thead>
                                <tbody id="demoList"></tbody>
                            </table>
                        </div>
                        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                    </div>

                </div>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <ul class="layui-upload-list" id="demo2"></ul>
                </blockquote>
            </div>
        </div>
        <div class="layui-tab-item album">
            <div class="layui-side">
                <div class="layui-side-scroll">
                    <ul class="list"></ul>
                </div>
            </div>
            <div class="layui-body" style="top: 55px;">
                <ul class="imageList"></ul>
                <div id="test1"></div>
            </div>
        </div>
        <div class="layui-tab-item guanli">
            <div class="guanlilist"></div>
            <div class="add">新增相册</div>
        </div>
    </div>
    <input type="hidden" id="src">
</div>
{/block}
{block name="js"}
<script>
    var type,list=[],album_id,tab_index = 0,baseUrl="http://yongming.xxryjsapi.top",pic
    layui.use(['element','upload','jquery','form','laypage','layer'],function(){
        var element = layui.element,upload = layui.upload,$ = layui.jquery,form = layui.form,laypage = layui.laypage,layer = layui.layer
        // initButtons();
        //相册相关
        getAlbum()
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: baseUrl + '/system/uploadFile' //改成您自己的上传接口
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,data:{album_id:function(){
                    return $("select[name='album']").val();
                }}
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                if(res.file){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
        element.on('tab(tab)', function(data){
            tab_index = data.index
            pic = ''
            $("#src").val('')
            switch (tab_index) {
                case 0:
                    break;
                case 1:
                    //打开图片列表
                    getPicList()
                    break;
                case 2:
                    //上传远程图片
                    break;
                case 3:

                    break;
            }
        });
        $(".album .layui-side .list").on('click',".item",function () {
            $(".album .layui-side .list .item").removeClass('on')
            $(this).addClass('on')
            getPicList(1,20)
        })
        $(".imageList").on('click','.item',function(){
            $(".imageList .item").removeClass('active')
            $(this).addClass('active')
            pic = $(this).find('img').attr('src')
            $("#src").val(pic)
        })
        $("#remoteUrl").blur(function(){
            var url = $(this).val()
            if(!url) return false;
            $(".review").empty().append(`<img src="${url}">`)
            pic = url
            $("#src").val(pic)
        })
        $(".guanlilist").on('click','.del',function(){
            var id = $(this).data('id')
            var _this = this
            layer.confirm('真的要删除这个相册吗?删除后该相册内的所有文件也将被删除!!!',function(index){
                $.get(baseUrl + '/system/delFileGroup?id='+id,res=>{
                    layer.msg(res.msg)
                    if(res.code == 200){
                        $(_this).parent().remove()
                    }
                    layer.close(index)
                })
            },function(){})
        })
        $(".guanli .add").click(function(){
            layer.prompt({
                formType: 0,
                title: '相册名',
            },function(val,index){
                $.ajax({
                    url:baseUrl + '/system/addFileGroup',
                    data:{name:val},
                    type:'post',
                    success:res=>{
                        if(res){
                            let txt = `<div class="item"><p>${val}</p><span class="del" data-id="${res}">x</span></div>`
                            $(".guanlilist").append(txt)
                        }else{
                            layer.msg('新增失败')
                        }
                        layer.close(index)
                    }
                })
            })
        })
        function layuipage(obj){
            laypage.render({
                elem: 'test1',
                count: obj.total,
                limit:obj.per_page,
                curr:obj.current_page,
                jump:(obj2,curr)=>{
                    if(!curr){
                        getPicList(obj2.curr,obj2.limit)
                    }
                }
            });
        }
        function getPicList(page=1,limit=20){
            var album_id = $(".layui-side-scroll .list .item.on").data('id')
            $.ajax({
                url:baseUrl + '/system/getFileList',
                data:{page,limit,album_id},
                type:'post',
                success:res=>{
                    if(res.total != 0){
                        let txt = ''
                        for(let v of res.data){
                            txt += `<li class="item"><img src="${v.src}"><span class="icon"></span></li>`
                        }
                        $(".imageList").empty().append(txt)
                        layuipage(res)
                    }else{
                        $(".imageList").empty()
                        $("#test1").html('<p style="text-align: center;">没有找到内容哦~~~~</p>')
                    }

                }
            })
        }
        function getAlbum(){
            $.get(baseUrl + '/system/getFileGroup',(res)=>{
                let txt = '' //上传图片右边的选择相册
                let txt2 = '' // 本地图库的相册列表渲染
                let txt3 = '' // 相册列表渲染
                for(let v of res){
                    txt += `<option value="${v.id}">${v.album_name}</option>`
                    txt2 += `<li class="item" data-id="${v.id}">${v.album_name}</li>`
                    txt3 += `<div class="item"><p>${v.album_name}</p><span class="del" data-id="${v.id}">x</span></div>`
                }
                $("select[name='album']").append(txt)
                $(".album .layui-side .list").empty().append(txt2)
                $(".guanlilist").append(txt3)
                $(".album .layui-side .list .item").eq(0).addClass('on')
                album_id = res[0].id
                form.render('select');
            })
        }
    })




</script>
{/block}